<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        body {
            background: url("../img/bg.png");
        }

        .center {
            width: 400px;
            background: white;
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<div>
    <img src="../img/logo.png">
</div>
<div class="center">
    <div>注册详情</div>
    <hr/>
    <form action="#" method="get" autocomplete="off">
        <div>
            <label for="username">姓名: </label>
            <input type="text" id="username" name="username" value="" placeholder="请输入姓名" required/>
        </div>
        <div>
            <label for="password">密码: </label>
            <input type="password" id="password" name="password" value="" placeholder="请输入密码" required/>
        </div>
        <div>
            <label for="email">邮箱: </label>
            <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required/>
        </div>
        <div>
            <label for="tel">手机: </label>
            <input type="tel" id="tel" name="tel" value="" placeholder="请输入手机号码" required/>
        </div>
        <hr>
        <div>
            <label for="gender">性别: </label>
            <input type="radio" id="gender" name="gender" value="man">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="gender" value="woman">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
            <label for="ah">爱好: </label>
            <input type="checkbox" id="ah" name="ah" value="music">音乐
            <input type="checkbox" name="ah" value="ah2">电影
            <input type="checkbox" name="ah" value="ah1">游戏
        </div>
        <div>
            <label for="date">出生日期: </label>
            <input type="date" id="date" name="date" value="date">
        </div>
        <div>
            <label for="city">所在城市 </label>
            <select id="city" name="city">
                <option>请选择您所在的城市</option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="省会市">
                    <option>西安</option>
                    <option>合肥</option>
                    <option>济南</option>
                    <option>武汉</option>
                </optgroup>
            </select>
        </div>
        <hr>


        <div>
            <label for="desc">个性签名: </label>
            <textarea id="desc" name="desc" rows="5" cols="40" placeholder="请写下您的与众不同..."></textarea>
        </div>
        <hr>
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>
</body>
</html>